Beispiel: Eine grundlegende Vorlage, Schritt für Schritt – HTML importieren: 2. Inhalte personalisieren

Im vorherigen Schritt wurde eine komprimierte (Zip)-Datei mit Hilfe des Import-Assistenten im Kapitel Inhalt von Selligent by Zetaimportiert, die eine HTML-Datei und Bilder enthält, um eine neue E-Mail-Vorlage zu erstellen.

Nun werden wir den Inhalt dieser Vorlage personalisieren .

Dies ist in zwei Modi möglich:

Hinweis: Oben können Sie zwischen dem Quell- und dem Designmodus hin- und herschalten.

Quellmodus:


Designmodus:

 

Personalisieren von Inhalten im Designmodus

Nach dem Import sieht die Vorlage im Designmodus wie folgt aus:

Klicken Sie auf das Symbol Links oben rechts:

Sie werden feststellen, dass die folgenden Links bereits vorhanden sind (sie wurden mit der HTML-Datei importiert):

  • Webversion – Wird im Moment nicht verwendet (roter Kreis mit Wert 0) – aber wir werden wir das ändern.
  • Diese E-Mail in Ihrem Browser anzeigen – Der Text zum Anzeigen der Webversion der E-Mail, zweimal verwendet (grüner Kreis mit Wert 2). Wir werden das Ziel des oberen Textes ändern, so dass er stattdessen mit dem Link „Webversion“ oben verknüpft wird.
  • Link 101 – Dieser Link führt zur Homepage des Parana-Shops. Wir wollen zumindest, dass sowohl der Text der oberen PARANA-Navigationsleiste als auch das Bild im Textteil mit der Homepage des Shops verlinkt sind.
  • Link 102 – Parana-Facebook-Link; für das Facebook-Symbol im Footer der E-Mail-Vorlage.
  • Link 103 – Parana-'X' (ehemals Twitter)-Link; für das 'X' (ehemals Twitter)-Symbol im Footer der E-Mail-Vorlage.
  • Link 104 – Parana-Google-Plus-Link; für das Google Plus-Symbol im Footer der E-Mail-Vorlage.
  • Link 105 - Parana-Youtube-Link; für das Youtube-Symbol im Footer der E-Mail-Vorlage.

Hinweis: Der Parana-Webshop ist ein fiktiver Webshop zur Nachbildung von Anwendungsfällen.
Sie können die gleiche Arbeitsweise für die Verlinkung auf eine andere Website anwenden.

Schauen wir uns die folgenden Punkte an und sehen wir, ob jeder einzelne von ihnen unseren Anforderungen entspricht:

  1. Link Webversion
  2. Punkte in der oberen Navigationsleiste (Parana, Mode, Heim, Elektro)
  3. Bildlink zum Beginnen des Einkaufs
  4. Inhalt und Stil des Textes („Endlich ist der Frühling da!...“)
  5. Symbole für soziale Medien im Footer (Facebook, 'X' (ehemals Twitter) usw.)
  6. Abbestellen-Link

 

Link Webversion

Ändern wir den Text oben in der E-Mail-Vorlage so, dass er eine Verknüpfung zum Link der Standard-Webversion herstellt (ID = 0).

Wählen Sie den Text ‚Diese E-Mail in Ihrem Browser anzeigen‘ und klicken Sie auf das Symbol ‚Verfolgter Link‘.

Fügen Sie in dem daraufhin erscheinenden Popup-Fenster einen Tooltip-Text hinzu und ändern Sie den Link in ‚Webversion‘.
Klicken Sie auf die Schaltfläche Einfügen am unteren Rand, um Ihre Änderungen zu übernehmen.

Dieser Text ist jetzt mit der Webversion verknüpft.

 

Punkte in der oberen Navigationsleiste

Klicken Sie in der oberen Navigationsleiste auf den Punkt Parana und überprüfen Sie, ob bereits der richtige Link angewendet wird. 

Link 101 ist der richtige Linke für die Homepage des Parana-Webshops, wie hier erwähnt.

Erstellen Sie nun neue Links für jeden anderen Punkt der oberen Navigationsleiste (um sie mit dem fiktiven Parana-Webshop zu verknüpfen):

  • Mode – Link zur Rubrik ‚Mode‘ im Parana-Webshop.
    Zum Beispiel https://parana.selligent.com/shop/default.aspx?CATIDL3=25
  • Home – Link zum Bereich ‚Home' im Parana-Webshop.
    Zum Beispiel https://parana.selligent.com/shop/default.aspx?CATIDL3=48
  • Elektro – Link zur Rubrik ‚Elektro‘ im Parana-Webshop.
    Zum Beispiel https://parana.selligent.com/shop/default.aspx?CATIDL3=5

Beispiel:
– Wählen Sie den Text Mode aus und klicken Sie auf das Symbol ‚Verfolgter Link‘:

– Klicken Sie im Pop-up-Fenster auf ‚+‘, um einen neuen Link hinzuzufügen:

– Geben Sie einen Linknamen ein, legen Sie eine externe URL als Ziel fest und klicken Sie auf ‚Ok‘:

– Der Wert des Feldes ‚Link‘ wird automatisch mit dem von Ihnen eingegebenen Linknamen aktualisiert. Klicken Sie auf ‚Einfügen‘.

– Der korrekte Link wird nun auf den Text ‚Mode‘ angewendet.
– Wenden Sie dasselbe Verfahren auf die anderen Punkte in der oberen Navigationsleiste, ‚Home‘ und ‚Elektro‘, an (erstellen Sie für jeden von ihnen neue Links).
– In den ‚Links‘-Eigenschaften der E-Mail-Vorlage können Sie sehen, dass die erstellten Links sichtbar sind und verwendet werden:

 

Bildlink zum Beginnen des Einkaufs

Das Bild im Textkörper der E-Mail-Vorlage sollte eine Verknüpfung zum Link 101 herstellen, der zur Homepage des Parana-Shops führt.

Wählen Sie das Bild aus und klicken Sie auf das Symbol für den verfolgten Link:

Im Pop-up-Fenster können Sie sehen, dass bereits eine Verknüpfung zu Link 101 besteht, was korrekt ist.
Sollte dies nicht der Fall sein, könnte dies hier aktualisiert werden:

Klicken Sie auf ‚Abbrechen‘.

 

Inhalt und Stil des Textes

Der Text im Textkörper sieht nun wie folgt aus:

Wir wollen, dass er so aussieht:

Daher müssen wir die folgenden Anpassungen vornehmen:

  • Entfernen Sie die Texte von Überschrift 1, Überschrift 2 und Überschrift 3, indem Sie sie markieren und die Entf- oder Rücktaste auf der Tastatur drücken.
    Entfernen Sie auch den Link ‚Einkaufen beginnen >>‘ (da wir das Bild für diesen Zweck verwenden).

  • Richten Sie den Text zentriert aus.

  • Ändern Sie die Schriftart (z. B. zu Trebuchet).

Der Entwurf sieht nun wie folgt aus:

 

Symbole für soziale Medien im Footer

Im Footer befinden sich vier Symbole für soziale Medien.
Wir möchten, dass jedes von ihnen mit dem entsprechenden sozialen Medium verlinkt wird.

  • Facebook – Klicken Sie auf das Facebook-Symbol im Footer und auf das Symbol ‚Verfolgter Link‘ im oberen Bereich.

    Das Symbol sollte eine Verknüpfung zum ‚Link 102‘ herstellen.


  • 'X' (ehemals Twitter) – Klicken Sie auf das 'X' (ehemals Twitter)-Symbol im Footer und auf das Symbol ‚Verfolgter Link‘ im oberen Bereich.

    Das Symbol sollte eine Verknüpfung zum ‚Link 103‘ herstellen.


  • Google Plus – Klicken Sie auf das Google Plus-Symbol im Footer und auf das Symbol ‚Verfolgter Link‘ im oberen Bereich.

    Das Symbol sollte eine Verknüpfung zum ‚Link 104‘ herstellen.


  • YouTube – Klicken Sie auf das YouTube-Symbol im Footer und auf das Symbol ‚Verfolgter Link‘ im oberen Bereich.

    Das Symbol sollte eine Verknüpfung zum ‚Link 105‘ herstellen.

 

Im Footer der E-Mail-Vorlage befindet sich rechts der Text mit der Aufschrift ‚Abbestellen‘.
Wir möchten dies mit einem tatsächlichen Link verknüpfen, über den sich die Benutzer von der E-Mail-Kommunikation abmelden können.

Klicken Sie auf den Text ‚Abbestellen‘ und auf das Symbol ‚Verfolgter Link‘ oben.

Der Text stellt eine Verknüpfung zum Link ‚Diese E-Mail in Ihrem Browser anzeigen‘ her.
Ändern wir dies so, dass er eine Verknüpfung zum Abbestellen-Link herstellt.

Klicken Sie hierzu auf das Symbol ‚+‘ auf der rechten Seite.

Nehmen Sie in dem neuen Pop-up-Fenster ‚Link hinzufügen‘, das erscheint, folgende Eingaben vor:

  • geben Sie einen Namen für den Link ein
  • als Ziel verwenden wir ‚externe URL' und geben eine URL in das Feld darunter ein
  • erweitern Sie die ‚erweiterten Einstellungen‘ und aktivieren Sie die Option ‚Abbestellen-Link'.

Klicken Sie dann auf ‚Ok‘.

Nun wird der korrekte Abbestellen-Link verwendet.

Klicken Sie auf ‚Einfügen‘.

Der Abbestellen-Link wird nun auf den Abbestellen-Text angewendet.

 

Personalisieren von Inhalten im Quellmodus

Die gesamte Personalisierung von Inhalten, die im Designmodus vorgenommen wurde, kann auch im Quellmodus durchgeführt werden.
Wechseln Sie in den ‚Quellmodus' (falls dieser noch nicht aktiv ist).

Wir gehen kurz die Änderungen durch, die bereits im Designmodus vorgenommen wurden, damit Sie eine Vorstellung davon bekommen, wo Sie sie im Quellmodus finden.

  1. Link Webversion Im Quellmodus kann dies erreicht werden, indem der korrekte href-Link im <a>-Tag für den Text ‚Diese E-Mail in Ihrem Browser anzeigen‘ gesetzt wird, der ‚LINK(0)‘ lautet.
  2. Punkte in der oberen Navigationsleiste (Parana, Mode, Home, Elektro) – Im Quellmodus kann dies durch Setzen des richtigen href-Links in den <a>-Tags für die verschiedenen Punkte erfolgen.

    – ‚Parana‘ sollte mit ‚LINK(101)‘ verknüpft werden:


    – ‚Mode ' sollte mit ‚LINK(106)‘, Home mit ‚LINK(107)‘ und Elektro mit ‚LINK(108)‘ verknüpft werden:


  3. Bildlink zum Beginnen des Einkaufs – Im Quellmodus kann dies durch Setzen des korrekten href-Links, nämlich ‚LINK(101)‘, im <a>-Tag für das Bildelement erfolgen.

  4. Inhalt und Stil des Textes („Endlich ist der Frühling da!...“) – Der Textinhalt mit dem angewendeten Stil kann in diesem Absatz im Quellenmodus gesehen und bearbeitet werden.


  5. Symbole für soziale Medien im Footer (Facebook, 'X' (ehemals Twitter) usw.) – Die Symbole mit Links zu den entsprechenden sozialen Medien werden im Footer angezeigt:
    – Facebook = LINK(102)
    – 'X' (ehemals Twitter) = LINK(103)
    – Google Plus = LINK(104)
    – YouTube = LINK(105)


  6. Abbestellen-Link – Der Abbestellen-Link befindet sich ebenfalls im Footer, direkt darunter. Sein href-Wert ist LINK(109), der die externe Abbestellen-URL darstellt.

 

Nachdem Sie den Inhalt personalisiert und alle Links hinzugefügt haben, sehen Sie hier eine Übersicht über alle verwendeten Links:

Der eine Link, der mit einer roten ‚0‘-Wert markiert ist, kann gelöscht werden, da wir ihn nicht mehr verwenden.

 

Hinweis: Vergessen Sie nicht, Ihre E-Mail-Vorlage regelmäßig zu speichern!

 

Als nächsten Schritt fügen wir den E-Mail-Header hinzu.

SCHRITTE:
1. Datei importieren
2. Inhalte personalisieren
3. E-Mail-Header hinzufügen
4. Textversion extrahieren
5. E-Mail-Vorlage testen/Vorschau anzeigen
6. Eine einfache Journey erstellen, um die E-Mail-Vorlage an Kontakte zu senden